<style scoped>
.address_list{padding: 0 12px;}
.address_list>*{margin-bottom: 10px;}
.input-select_address{width: 100%;text-align: initial;}
.address_row{text-align: left;}
.address_row>.max{padding-left: 6px;}
.address_row .big{font-size: 1.1em;font-weight: bold;margin-bottom: 2px;}
.address_row .van-icon{font-size: 1.3em;}

.address_list_title{font-size: 18px;font-weight: bold;padding: 10px 0;text-align: center;position: relative;}
.address_list_title>.link{position: absolute;top: 10px;right: 10px;}
.address_list{overflow: hidden auto;max-height: 50vh;}
</style>
<template>
  <div class="form_item-select_address">
    <input v-if="!is_info" type="hidden" :name="name" :value="value">
    <div class="flex address_row" @click="show_select">
      <div class="max">
        <div class="flex big">
          <p>{{ this_value.name }} {{ this_value.phone }}</p>
          <el-tag v-if="is_info && type_title" size="small" type="primary">{{ type_title }}</el-tag>
        </div>
        <div v-if="this_value.address" class="info">{{this_value.area_name}} {{this_value.address}}</div>
        <div v-else-if="!is_info" class="info">请选择地址</div>
      </div>
    </div>

  </div>
</template>

<script>
import s94Mjs from "s94-js";
import {decode_config} from "@/js/s94_tool.js";

export default {
  _title_: '地址选择',
  _can_form_param_: true,
  name: "select_address",
  props: ['name', 'value', 'config', 'is_info', 'size', 'is_list'],
  emits: ['update:value', 'change'],
  data(){
    return {
      need_display: true, //定义当value变动时是否需要渲染，用来阻止当前组件变动 value 后重新渲染
      address_type: "",
      value_arr: [],

      options: [],
      address_list: [],
      this_value: {},

      show_address_list: false,
      address_list_type: '',
    }
  },
  methods: {
    is_address(v){
      if (!v || typeof v !== 'object') return false;
      return v.name && v.phone && v.address;
    },
    init(){
      this.options = decode_config(this.config || ["快递", "自提"]);
      if (this.address_type==='') this.address_type = this.options[0]["value"];
      if (!this.is_info) this.get_address_list();
    },
    get_address_list(){
      return;
      // 判定是否需要获取列表
      let type = this.options.map(v=>{return v.value;}).join(",");
      if (this.address_list_type !== type){
        ajax("/home/address/list?type="+type, ({data})=>{
          this.address_list_type = type;
          let list_map = {};
          Object.values(data).forEach(v=>{
            list_map[v.type] = list_map[v.type] || [];
            list_map[v.type].push(v);
          })
          this.options.forEach(row=>{
            row.address_list = list_map[row.value] || [];
          })
          this.change_type(this.address_type);
        })
      }
    },
    show_select(){
      if (this.is_info) return;
      this.show_address_list=true;
    },
    change_type(address_type){
      let option_row = {};
      this.options.forEach(row=>{
        if (address_type==row.value) option_row = row;
      })
      this.address_list = option_row.address_list || [];
      let old_value = this.is_address(this.value_arr[address_type]) ? this.value_arr[address_type] : false;
      this.this_value = old_value || this.address_list[0] || {}
    },
    set_value(){
      try {
        let val = JSON.parse(this.value);
        if (!this.is_address(val)) return;
        this.this_value = val;
        this.address_type = this.this_value.type;
        this.value_arr[this.address_type] = this.this_value;
      } catch (e) {}
    },
    update_value(v){
      this.need_display = false;
      setTimeout(()=>{this.need_display = true;},5);
      this.$emit('update:value', v);
      this.$emit('change', v);
    },
  },
  watch: {
    config(v){
      this.init();
    },
    address_type(v, oldV){
      if (this.is_address(this.this_value) && oldV !== "") this.value_arr[oldV] = this.this_value;
      this.change_type(v);
    },
    this_value(v){
      let pass = v.name && v.phone && v.address;
      let keys = ["name","phone","address","area","province_area_id","city_area_id","county_area_id","town_area_id","type"];
      let val = {};
      if (pass){
        Object.keys(v).forEach(k=>{
          if (~keys.indexOf(k)) val[k] = v[k];
        })
        val = JSON.stringify(val);
      }else {
        val = "";
      }
      this.need_display = false;
      setTimeout(()=>{this.need_display=true},10)
      this.$emit('update:value', val);
      this.$emit('change', val);
    },
    value(v){
      if (!this.need_display) return;
      this.set_value();
    },
  },
  computed: {
    type_title(){
      let type = s94Mjs.to_string(this.this_value.type);
      let res = "";
      this.options.forEach(row=>{
        if (row.value === type) res = row.content;
      })
      return res;
    }
  },
  mounted() {
    this.set_value();
    this.init();
  }
}
</script>